<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<%@ page contentType="text/html;charset=UTF-8" %>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="/static/css/list_1.css">
    <link rel="stylesheet" type="text/css" href="/static/css/list_2.css">
    <style>
        .blue{
            color: #3072f6!important;
        }
    </style>
</head>
<body>
<jsp:include page="head.jsp"></jsp:include>

<div>
    <div class="content w1150" id="content">
        <div class="content__article">
            <ul class="content__filter">
                <li>
                    <a href="javascript:void(0)" class="my order blue">我的订单</a>
                </li>
                <li>
                    <a href="javascript:void(0)" class="my repair">故障报修</a>
                </li>
                <li>
                    <a href="javascript:void(0)" class="my message">消息通知</a>
                </li>
            </ul>

            <div class="content__list" id="order">
                <c:forEach items="${orders}" varStatus="i" var="order">
                <div class="content__list--item">
                    <a class="content__list--item--aside" href="javascript:void(0)">
                        <img src="/preview/img/${order.house.img}" onerror="this.src='/static/images/img_error.png'">
                    </a>
                    <div class="content__list--item--main">
                        <p class="content__list--item--title">
                            <a target="_blank" href="/lease/public/detail/${order.leaseId}">${order.title}</a>
                        </p>
                        <p class="content__list--item--des">
                            <i>${order.house.area}㎡</i>
                            <i><a href="javascript:void(0);" onclick="viewContract('${order.id}')">查看合同</a></i>
                            <i><a href="javascript:void(0);" onclick="showRepair('${order.id}')">点我故障报修>>></a></i>
                        </p>
                        <p class="content__list--item--bottom oneline">
                            <c:set value="${ fn:split(order.house.tag, ',') }" var="strList" />
                            <c:forEach items="${strList}" var="strname" varStatus="i">
                                <i>${strname}</i>
                            </c:forEach>
                        </p>
                        <p class="content__list--item--brand oneline">
                            <span class="content__list--item--time">${order.checkInTime} ~ ${order.checkOutTime}</span>
                        </p>
                        <span class="content__list--item-price"><em>${order.price}</em> 元</span>
                    </div>
                </div>
                </c:forEach>
            </div>


            <div class="content__list" id="repair">
                <c:forEach items="${repairs}" varStatus="i" var="repair">
                    <div class="content__list--item">
                        <div class="content__list--item--main" style="margin-left: 0px;">
                            <p class="content__list--item--title">
                                <a href="javascript:void(0)">${repair.title}</a>
                            </p>
                            <p class="content__list--item--des">
                                <i>说明：${repair.remark}</i>
                            </p>
                            <p class="content__list--item--brand oneline">
                                <span class="content__list--item--time">报修时间：${repair.createTime}</span>
                                <c:if test="${repair.completionTime != null}">
                                <span class="content__list--item--time">维修完成时间：${repair.completionTime}</span>
                                </c:if>
                            </p>
                            <span class="content__list--item-price"><em>
                                <c:if test="${repair.status == '0'}">
                                    <div>已报修</div>
                                </c:if>
                                <c:if test="${repair.status == '1'}">
                                    <div>维修中</div>
                                </c:if>
                                <c:if test="${repair.status == '2'}">
                                    <div>已完成</div>
                                </c:if>
                            </em></span>
                        </div>
                    </div>
                </c:forEach>
            </div>


            <div class="content__list" id="message">
                <c:forEach items="${messages}" varStatus="i" var="message">
                    <div class="content__list--item">
                        <div class="content__list--item--main" style="margin-left: 0px;">
                            <p class="content__list--item--title">
                                <a href="javascript:void(0)">${message.title}</a>
                            </p>
                            <p class="content__list--item--des">
                                <i>${message.content}</i>
                            </p>
                            <p class="content__list--item--brand oneline">
                                <span class="content__list--item--time">${message.createTime}</span>
                            </p>
                        </div>
                    </div>
                </c:forEach>
            </div>
        </div>


    </div>


</div>



<div id="dlgSave" class="easyui-dialog dlg-save" data-options="closed:true,modal:true,border:'thin',buttons:'#dlg-buttons'">
    <form id="fmSave" method="post" novalidate style="margin:0;padding:20px 50px">
        <input type="hidden" id="orderId" name="orderId" value="">
        <table cellpadding="5">
            <tr>
                <%--                <td colspan="1">说明:</td>--%>
                <td colspan="5">
                    <input id="remark" name="remark" class="easyui-textbox" data-options="multiline:true, prompt: '请说明详细情况'"  style="height:300px;width:300px;white-space:pre-wrap" label="" style="width:100%">
                </td>
            </tr>
        </table>
    </form>
</div>
<div id="dlg-buttons">
    <a href="javascript:void(0)" class="easyui-linkbutton c6" iconCls="icon-ok" onclick="save()" style="width:90px">提交</a>
    <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-cancel" onclick="javascript:$('#dlgSave').dialog('close')" style="width:90px">取消</a>
</div>


<script>


    $(function(){
        $(".content__list").css('display', 'none')
        $("#order").css('display', 'block')
        remind();
    });


    /**
     * 提醒
     */
    function remind() {
        $.ajax({
            url: "/message/remind",
            type: "POST",
            contentType: "application/json",
            dataType: "json",
            success: function(result) {
                if (result.success){
                    $.messager.show({
                        title: result.data.title,
                        msg: result.data.content
                    });
                }
            }
        });
    }

    function showRepair(orderId) {
        $("#orderId").val(orderId);
        $('#dlgSave').dialog('open').dialog('center').dialog('setTitle','故障报修');
    }

    function save() {
        $('#fmSave').form('submit',{
            url: '/repair/manage/saveOrUpdate',
            onSubmit: function() {
                return $(this).form('enableValidation').form('validate');
            },
            success: function(data) {
                let res = $.parseJSON(data);
                console.log(res);

                if(res.success) {
                    $.messager.show({
                        title: 'Success',
                        msg: '报修成功！'
                    });
                } else {
                    $.messager.show({
                        title: 'Error',
                        msg: res.msg
                    });
                }

                $('#dlgSave').dialog('close');
            }
        });
    }


    function viewContract(orderId) {
        window.open('/order/contract?orderId=' + orderId);
    }


    $(".order").click(function(){
        $(".my").removeClass('blue');

        $(".content__list").css('display', 'none')
        $("#order").css('display', 'block')
        $(this).addClass('blue');

    });

    $(".message").click(function(){

        $(".my").removeClass('blue');
        $(".content__list").css('display', 'none')
        $("#message").css('display', 'block')
        $(this).addClass('blue');
    });


    $(".repair").click(function(){
        $(".my").removeClass('blue');
        $(".content__list").css('display', 'none')
        $("#repair").css('display', 'block')
        $(this).addClass('blue');
    });




</script>
</body>
</html>